<template>
    <div class="singerHomepage">
      <div class="singerHomepage-top">
          <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
                <use xlink:href="#icon-zuo1"></use>
          </svg>
          <div class="title">
            {{singerList.name}}
          </div>
          <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-touxiang"></use>
          </svg>
      </div>
      <div  class="detailed">
        <img :src="singerList.cover" alt="">
        <div class="detailed-title">
            {{singerList.name}}
          <div class="name" v-for="(item,i) in singerList.identifyTag" :key="i">
            {{item}}
            <div>共创作音乐 : {{singerList.musicSize}} 首</div>
            <div>共创作MV : {{singerList.mvSize}} 部</div>
          </div>
        </div>
      </div>
      <div class="singerHomepage-title">
        <div  v-for="(item,i) in titles" :key="i" :class="isactive === i ? 'addclass' : '' "
              @click="onclick(i,item)">
                  {{item}}
        </div>
      </div>
      <singerDetails :desc="desc" :album='album' :artists='artists'  :mv='mv'></singerDetails>
    </div>
</template>
<script>
import { useRoute } from 'vue-router'
import { setDetail, setDesc, setAlbum, setMV, setartists } from '@/api/index.js'
import singerDetails from './singerDetails.vue'
import { mapState } from 'vuex'
export default {
  components: {
    singerDetails
  },
  data () {
    return {
      singerList: '',
      titles: ['热门作品', '所有专辑', '相关MV', '艺人介绍'],
      desc: '',
      album: '',
      mv: '',
      artists: ''
    }
  },
  computed: {
    ...mapState(['isactive'])
  },
  async mounted () {
    const route = useRoute()
    const id = route.query.id
    const detail = await setDetail(id)
    this.singerList = detail.data.data.artist
    // console.log(this.singerList)

    const desc = await setDesc(id)
    this.desc = desc.data.introduction
    //  console.log(this.desc)

    const album = await setAlbum(id)
    this.album = album.data.hotAlbums
    //  console.log(this.album)

    const mv = await setMV(id)
    this.mv = mv.data.mvs
    //   console.log(this.mv)

    const artists = await setartists(id)
    this.artists = artists.data.hotSongs
    // console.log(artists.data.hotSongs)
  },
  methods: {
    onclick (i, item) {
      this.$store.commit('setIsactive', i)
      this.$store.commit('setType', item)
    }
  }
}
</script>
<style lang="less" scoped>
.singerHomepage{
  width: 7.5rem;
   .singerHomepage-top{
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    .title{
        font-style: italic;
        color: red;
        font-size: 0.4rem;
    }
    .icon{
        width: 0.6rem;
        height: 0.6rem;
        fill:#000;
    }
   }
   .detailed{
     width: 7.1rem;
     margin: 0.2rem auto;
     display: flex;
     justify-content: space-between;
     img{
       width: 4rem;
       height: 3rem;
     }
     .detailed-title{
       width: 2.4rem;
       font-size: 0.35rem;
       margin-right: 0.2rem;
       .name{
         font-size: 0.25rem;
         color:gray;
         line-height: 0.5rem;
         margin-top: 0.2rem;
       }
     }
   }
   .singerHomepage-title{
     width: 7.1rem;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     div{
       padding: 0.1rem;
     }
     .addclass{
          background-color: red;
        }
   }
}
</style>
